<template>
  <div>
<h1 ref="h1">ref模板使用</h1>
  <p ref="pm">vue的ref使用</p>
<hr>
<el-form ref="fm" />
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

import ElForm from './son.vue'
export default {
  components: {
    ElForm
  },
  setup () {
    // 获取h1元素dom对象
    const h1 = ref(null)

    // 获取form组件组件实例
    const fm = ref(null)

    onMounted(() => {
      console.log('组件挂载了获取：', h1.value, fm.value)
      h1.value.style.color = 'red'
      fm.value.validate(() => {
        console.log(456)
      })
    })

    return { h1, fm }
  },
  mounted () {
    console.log('vue2获取html元素：', this.$refs.pm)
  }
}
</script>

<style lang="scss" scoped>

</style>
